<template>
	<view>
		<navbar></navbar>
		<!-- pages/user/address/index.wxml -->
		<view class="container" style="margin-top: 50rpx;" v-if="!isLoading">
			<!-- 已保存的显示区块链地址 -->
			<view v-if="hasNftKey" class="blockchain-address">
				<!-- <view class="f-36 f-bold">实名信息</view> -->
				<view class="m-top10 col-9 f-26">＊区块链地址将作为你在区块链上拥有藏品的唯一地址</view>
				<view class="link-box-list">
					<view class="svgclass">
						<svg t="1666583975579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5710" width="128" height="128"><path d="M854.784 83.2c43.2 0 78.208 45.056 78.208 100.48v618.24c0 55.488-35.008 100.48-78.208 100.48H146.688c-43.136 0-78.208-44.992-78.208-100.48V183.68c0-55.424 35.072-100.48 78.208-100.48h708.096z m0-70.4H146.688C65.664 12.8 0 93.824 0 193.792v593.792c0 99.968 65.664 180.928 146.688 180.928h708.096c81.024 0 146.688-80.96 146.688-180.928V193.792C1001.472 93.824 935.808 12.8 854.784 12.8z m-155.008 294.656c42.048 0 76.352 35.264 76.352 78.528 0 43.328-34.304 78.528-76.352 78.528-42.112 0-76.352-35.2-76.352-78.528 0-43.264 34.24-78.528 76.352-78.528z m0-70.4c-80-1.728-146.112 63.616-147.84 145.92-1.6 82.176 61.888 150.272 141.824 152h6.016c80-1.728 143.488-69.76 141.824-152.064-1.6-79.872-64.192-144.192-141.824-145.856zM447.424 364.992H142.272a34.752 34.752 0 0 1-34.24-35.2c0-19.456 15.36-35.2 34.24-35.2h305.152c18.88 0 34.24 15.744 34.24 35.2 0 19.456-15.36 35.2-34.24 35.2z m0 151.36H142.272a34.624 34.624 0 0 1-35.648-33.664 34.816 34.816 0 0 1 35.648-36.672h305.152a34.624 34.624 0 0 1 35.648 33.664 34.816 34.816 0 0 1-35.648 36.672zM356.48 667.84H142.272a34.752 34.752 0 0 1-34.24-35.2c0-19.456 15.36-35.2 34.24-35.2H356.48c18.88 0 34.24 15.744 34.24 35.2 0 19.456-15.36 35.2-34.24 35.2z" fill="#2c2c2c" p-id="5711"></path><path d="M818.688 680.704c-15.552 0-28.16-15.744-28.16-35.2 0-62.72-40.704-113.792-90.752-113.792-50.112 0-90.88 51.072-90.88 113.792 0 19.456-12.544 35.2-28.096 35.2-15.488 0-28.096-15.744-28.096-35.2 0.128-101.632 65.92-184 147.008-184.128 81.216 0.128 147.008 82.432 147.072 184.128 0 19.456-12.544 35.2-28.096 35.2z" fill="#2c2c2c" p-id="5712"></path></svg>
					</view>
					<!-- <view v-if="nft_key" class="link-box">
						<view class="link-type-copy">
							<view class="link-type">百度链：</view>
							<view class="btn-copy" @tap.stop.prevent="copyAddress" :data-content="nft_key">复制</view>
						</view>
						<view class="address-link m-top50">{{ nft_key }}</view>
					</view>
					<view v-if="myl_nft_key" class="link-box">
						<view class="link-type-copy">
							<view class="link-type">蚂蚁链：</view>
							<view class="btn-copy" @tap.stop.prevent="copyAddress" :data-content="myl_nft_key">复制</view>
						</view>
						<view class="address-link m-top50">{{ myl_nft_key }}</view>
					</view> -->
					<view class="link-box">
						姓名：{{ name }}
					</view>
					<view class="link-box">
						手机：{{ phone }}
					</view>
					<view v-if="bsn_nft_key" class="link-box">
						<view class="link-type-copy">
							区块链地址：
							<view class="address-link">{{ bsn_nft_key.substr(0,15) + '...' }}</view>
							<!-- <view class="btn-copy" @tap.stop.prevent="copyAddress" :data-content="bsn_nft_key">复制</view> -->
							<view class="dy-iconfont icon-copy" @tap.stop.prevent="copyAddress" :data-content="bsn_nft_key"></view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 未保存的显示表单 -->
			<view v-else class="blockchain-address">
				<view class="f-36 f-bold">实名认证</view>
				<!-- <view class="m-top10 col-9 f-26">＊请确认注册手机号与实名信息匹配</view> -->
				<view class="form f-28">
					<view class="option dis-flex flex-y-center">
						<view class="option-title">手机号</view>
						<view class="option-detail flex-box">
							<!-- #ifndef MP -->
							<input type="number" v-model="blockchainAddress.phoneNumber" placeholder="请输入手机号" />
							<!-- #endif -->
							<!-- #ifdef MP -->
							<view v-if="0 == blockchainAddress.phoneNumber.length" class="placeholder-class">绑定手机号
							</view>
							<view v-else>{{ blockchainAddress.phoneNumber }}</view>
							<button class="btn-normal btn-get-phone" open-type="getPhoneNumber"
								@getphonenumber="getPhoneNumber">
								<!-- 应该要调取一个获取手机的接口，未保存前可以再次选择更换，提交后就不允许更换了 -->
								<text v-if="0 == blockchainAddress.phoneNumber.length" class="col-m">绑定</text>
								<text v-else class="col-m">更换</text>
							</button>
							<!-- #endif -->
						</view>
					</view>
					<!-- #ifndef MP -->
					<view class="option dis-flex flex-y-center">
						<view class="option-title">验证码</view>
						<view class="option-detail flex-box">
							<view class="form-input dis-flex">
								<input v-model="blockchainAddress.smscode" placeholder="请输入验证码" maxlength="6" />
								<send-code class="send-code" :mobile="this.blockchainAddress.phoneNumber" ref="sendCode"
									@checkphone="checkPhone"></send-code>
							</view>
						</view>
					</view>
					<!-- #endif -->
					<view class="option dis-flex flex-y-center">
						<view class="option-title">真实姓名</view>
						<view class="option-detail flex-box">
							<input type="text" :value="blockchainAddress.username" placeholder="请输入姓名"
								placeholder-class="placeholder-class" @input="inputUsername" />
						</view>
					</view>
					<view class="option dis-flex flex-y-center">
						<view class="option-title">身份证号</view>
						<view class="option-detail flex-box">
							<input type="text" :value="blockchainAddress.idcard" placeholder="请输入身份证号"
								placeholder-class="placeholder-class" @input="inputIdCard" />
						</view>
					</view>
				</view>
				<view class="bottom">
					<button class="btn-normal btn-submit"
						:disabled="0 == blockchainAddress.phoneNumber.length || 0 == blockchainAddress.username.length || 0 == blockchainAddress.idcard.length || forceDisabled"
						@tap.stop.prevent="submit">
						确认
					</button>
					<view v-if="canIUseAgreement" class="agreement m-top20 dis-flex">
						<view class="btn-agree" @tap.stop.prevent="onToggleAgree">
							<text v-if="isAgree" class="dy-iconfont icon-ok"></text>
							<text v-else class="btn-agree-placeholder"></text>
						</view>
						<view class="agreement-tips f-24">
							<view class="col-9">我已同意{{ appName }}使用我提交的用户实名认证</view>
							<view class="col-9">
								及
								<text class="f-26" @tap.stop.prevent="showAgreement">《用户服务协议和隐私政策》</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="separate"></view> -->
			<!-- 收货地址表单-->
			<view v-if="false" :class="'delivery-address ' + (real_address_status === 1 ? 'edit' : '')">
				<view class="f-36 f-bold">收货地址</view>
				<view class="m-top10 col-9 f-26">＊将用于包含实物藏品的活动，不影响数字藏品的获取</view>
				<view class="form f-28">
					<view class="option dis-flex flex-y-center">
						<view class="option-title">收货人</view>
						<view class="option-detail flex-box">
							<input v-if="real_address_status === 0" type="text" :value="deliveryAddress.receiver"
								placeholder="请输入收货人" placeholder-class="placeholder-class"
								@input="inputDeliveryUsername" />
							<view v-else class="text" @tap.stop.prevent="openEditDialog" data-name="receiver"
								data-type="text" data-label="收货人">
								{{ deliveryAddress.receiver }}
							</view>
						</view>
					</view>
					<view class="option dis-flex flex-y-center">
						<view class="option-title">联系手机</view>
						<view class="option-detail flex-box">
							<input v-if="real_address_status === 0" type="number"
								:value="deliveryAddress.receiver_phone" placeholder="请输入手机号"
								placeholder-class="placeholder-class" @input="inputDeliveryPhoneNumber" />
							<view v-else class="text" @tap.stop.prevent="openEditDialog" data-name="receiver_phone"
								data-type="number" data-label="联系手机">
								{{ deliveryAddress.receiver_phone }}
							</view>
						</view>
					</view>
					<view class="option dis-flex flex-y-center">
						<view class="option-title">所在区域</view>
						<view class="option-detail flex-box">
							<region-picker @change="bindRegionChange" :value="deliveryAddress.region">
								<block v-if="real_address_status === 0">
									<text v-if="deliveryAddress.region.length">{{ regionDescription }}</text>
									<text v-else class="placeholder-class">选择省、市、区</text>
								</block>

								<view v-else class="text">{{ deliveryAddress.region }}</view>
							</region-picker>
						</view>
					</view>
					<view class="option dis-flex flex-y-center">
						<view class="option-title">详细地址</view>
						<view class="option-detail flex-box">
							<input v-if="real_address_status === 0" type="text" :value="deliveryAddress.detail"
								placeholder="请输入街道小区楼层" placeholder-class="placeholder-class"
								@input="inputDeliveryDetailAddress" />
							<view v-else class="text" @tap.stop.prevent="openEditDialog" data-name="detail"
								data-type="text" data-label="详细地址">
								{{ deliveryAddress.detail }}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom" v-if="real_address_status === 0">
					<button class="btn-normal btn-submit" @tap.stop.prevent="saveDeliveryAddress" :disabled="
                            0 == deliveryAddress.receiver_phone.length ||
                            0 == deliveryAddress.receiver.length ||
                            0 == deliveryAddress.region.length ||
                            0 == deliveryAddress.detail.length ||
                            forceDisabled
                        ">
						保存
					</button>
				</view>
			</view>
		</view>
		<bottom-safe-area></bottom-safe-area>
		<!-- 编辑弹窗 -->
		<edit-dialog :show="showEditDialog" :label="curEditObj.label" :init-data="deliveryAddress[curEditObj.name]"
			:inputType="curEditObj.type" @close="closeEditDialog" @done="getEditData"></edit-dialog>
	</view>
</template>

<script>
	import navbar from "@/components/navbar/navbar";
	import editDialog from '@/components/editDialog/index';
	import bottomSafeArea from '@/components/bottom-safe-area/index';
	// pages/user/address/index.js
	const app = getApp();
	import verify from '../../../utils/verify';
	import siteinfo from '@/siteinfo.js';

	export default {
		components: {
			navbar,
			editDialog,
			bottomSafeArea
		},
		data() {
			return {
				appName: siteinfo.name,
				sliderVerifyFLag: false,
				showEditDialog: false,
				hasNftKey: false,
				name: '',//真实姓名
				phone: '',
				nft_key: '',
				bsn_nft_key: '',
				myl_nft_key: '',
				//区块链地址
				real_address_status: '',
				//是否保存过收货地址
				blockchainAddress: {
					phoneNumber: uni.getStorageSync('userInfo').phone,
					username: '',
					idcard: '',
					smscode: ''
				},
				deliveryAddress: {
					receiver: '',
					receiver_phone: '',
					region: [],
					detail: ''
				},
				canIUseAgreement: false,
				isAgree: false,
				forceDisabled: false,
				// 暴力禁用提交按钮
				isLoading: true,
				//加载地址详情
				curEditObj: {
					name: '',
					type: '',
					label: ''
				}
			};
		},
		computed: {
			regionDescription() {
				return this.deliveryAddress.region.join(" ");

			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getDetail();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			// 发送验证码前校验手机号
			checkPhone() {
				if (!this.blockchainAddress.phoneNumber) {
					app.showError('请输入手机号');
					return;
				}
				if (!verify.isPhone(this.blockchainAddress.phoneNumber)) {
					app.showError('手机号格式不正确');
					return;
				}

				// 通过校验
				this.$refs.sendCode.checkPhoneOk();
			},

			// 输入区块链地址姓名
			inputUsername: function(e) {
				this.setData({
					'blockchainAddress.username': e.detail.value
				});
			},

			// 输入身份证号
			inputIdCard: function(e) {
				this.setData({
					'blockchainAddress.idcard': e.detail.value
				});
			},

			// 获取手机号
			getPhoneNumber: function(e) {
				app.getPhoneNumber(e, (phoneNumber) => {
					this.setData({
						'blockchainAddress.phoneNumber': phoneNumber
					});
				});
			},

			// 输入收货人
			inputDeliveryUsername: function(e) {
				this.setData({
					'deliveryAddress.receiver': e.detail.value
				});
			},

			// 输入联系手机
			inputDeliveryPhoneNumber: function(e) {
				this.setData({
					'deliveryAddress.receiver_phone': e.detail.value
				});
			},

			// 输入详细地址
			inputDeliveryDetailAddress: function(e) {
				this.setData({
					'deliveryAddress.detail': e.detail.value
				});
			},

			// 修改地区
			bindRegionChange: function(e) {
				this.setData({
					'deliveryAddress.region': e.detail.value
				});

				if (this.real_address_status === 1) {
					//编辑
					this.saveDeliveryAddress();
				}
			},

			// 切换同意协议
			onToggleAgree: function() {
				this.setData({
					isAgree: !this.isAgree
				});
			},

			// 查看合同
			showAgreement: function() {
				uni.showLoading({
					title: '加载中...'
				});
				uni.downloadFile({
					url: 'https://274183.m.ecbao.cn/uploads/default/agreement.pdf',
					success: function(res) {
						const filePath = res.tempFilePath;
						const fs = uni.getFileSystemManager();
						fs.saveFile({
							tempFilePath: filePath,
							//Path我这里是wx.downloadFile()下载下来的文件临时地址
							//wx.env.USER_DATA_PATH这个是微信文件的路径  没试过别的  别的路径一般没有权限
							filePath: `${uni.env.USER_DATA_PATH}/用户服务协议和隐私政策.pdf`,
							success: function(res) {
								uni.openDocument({
									filePath: res.savedFilePath,
									fileType: 'pdf'
								});
							},
							fail: function(res) {
								console.log(res);
							}
						});
					},
					fail: (res) => {},
					complete: (res) => {
						uni.hideLoading();
					}
				});
			},

			// 保存地址
			submit: function(e) {
				let form = this.blockchainAddress;
				if (!verify.isPhone(form.phoneNumber)) {
					app.showError('手机号格式不正确');
					return;
				}

				// #ifndef MP 
				if (form.smscode == "") {
					app.showError('请输入验证码');
					return;
				}
				if (!verify.isPositiveInteger(form.smscode)) {
					app.showError('验证码不正确');
					return;
				}
				// #endif

				if (!verify.isIdcard(form.idcard)) {
					app.showError('请输入正确的身份证信息');
					return;
				}
				if (this.canIUseAgreement && !this.isAgree) {
					app.showError('请先同意服务协议');
					return;
				}

				// 按钮禁用
				this.setData({
					forceDisabled: true
				});
				uni.showLoading({
					mask: true
				});
				// 小程序直接保存
				// #ifdef MP
				// 保存区块链地址
				this.saveAddress();
				// #endif

				// 非小程序先验证手机号
				// #ifndef MP 
				// 校验手机号验证码
				this.checkPhoneCode(() => {
					// 保存区块链地址
					this.saveAddress();
				});
				// #endif
			},
			// 保存区块链地址
			saveAddress() {
				let form = this.blockchainAddress;
				app._post_form(
					'address/add', {
						name: form.username,
						phone: form.phoneNumber,
						ID_number: form.idcard,
						detail: ''
					},
					(res) => {
						if (app.lastPage() && app.lastPage().addAddressSuccessCallback) {
							app.lastPage().addAddressSuccessCallback();
						}

						this.getDetail();
					},
					null,
					() => {
						// 解除禁用
						this.setData({
							forceDisabled: false
						});
						uni.hideLoading();
					}
				);
			},
			// 校验手机号验证码
			checkPhoneCode(callback) {
				let form = this.blockchainAddress;
				app._post_form(
					'smscaptcha/check', {
						type: 2,
						phone: form.phoneNumber,
						smscode: form.smscode,
					},
					(res) => {
						typeof callback == 'function' && callback();
					},
					() => {
						// 解除禁用
						this.setData({
							forceDisabled: false
						});
						uni.hideLoading();
					});
			},
			/**
			 * 保存收货地址
			 * @param {} e
			 */
			saveDeliveryAddress: function(obj) {
				let form = obj && obj.form ? obj.form : this.deliveryAddress;

				if (!this.hasNftKey) {
					app.showError('请先保存区块链地址信息');
					return;
				}

				if (!verify.isPhone(form.receiver_phone)) {
					app.showError('请输入正确的手机号');
					return;
				} // 按钮禁用

				this.setData({
					forceDisabled: true
				});
				uni.showLoading({
					mask: true
				}); // 提交到后端

				let params = {
					...form
				};
				params.region = params.region.join(',');

				app._post_form(
					'address/editRealAddress',
					params,
					(res) => {
						this.getDetail();
						this.closeEditDialog();
					},
					null,
					() => {
						// 解除禁用
						this.setData({
							forceDisabled: false
						});
						uni.hideLoading();
					}
				);
			},

			getDetail() {
				uni.showLoading({
					mask: true
				});
				this.setData({
					isLoading: true
				});

				app._get('address/getAddress', {}, (result) => {
					const {
						region,
						real_address_status,
						receiver_phone,
						receiver,
						detail,
						nft_key,
						myl_nft_key,
						bsn_nft_key,
						name,
						phone
					} = result.data;
					let hasNftKey = nft_key || myl_nft_key || bsn_nft_key ? true : false;
					this.setData({
						name: name,
						phone: phone,
						hasNftKey: hasNftKey,
						nft_key: nft_key,
						myl_nft_key: myl_nft_key,
						bsn_nft_key: bsn_nft_key,
						real_address_status: real_address_status,
						deliveryAddress: {
							receiver: receiver || '',
							receiver_phone: receiver_phone || '',
							region: real_address_status === 1 ? [region.province, region.city, region
								.region
							] : [],
							detail: detail || ''
						},
						isLoading: false
					});
					uni.hideLoading();
				});
			},

			// 复制地址
			copyAddress: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.content
				});
			},

			/**
			 * 打开编辑弹窗
			 * @param {*} e
			 */
			openEditDialog(e) {
				let dataset = e.currentTarget.dataset;
				this.setData({
					curEditObj: {
						name: dataset.name,
						type: dataset.type,
						label: dataset.label
					},
					showEditDialog: true
				});
			},

			/**
			 * 关闭弹窗
			 */
			closeEditDialog() {
				this.setData({
					curEditObj: {
						name: '',
						type: '',
						label: ''
					},
					showEditDialog: false
				});
			},

			getEditData(e) {
				let data = e.detail;
				let {
					name
				} = this.curEditObj;
				let deliveryAddress = {
					...this.deliveryAddress
				};
				deliveryAddress[name] = data;
				console.log('deliveryAddress', deliveryAddress);
				this.saveDeliveryAddress({
					form: deliveryAddress
				});
			}
		}
	};
</script>
<style lang="scss">
  page,
  body {
    background: #fff!important;
  }
</style>
<style lang="scss" scoped>
	/* pages/user/address/index.wxss */
	.blockchain-address,
	.delivery-address {
		padding: 30rpx;
	}

	.link-box {
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 20rpx;
		// background: #F9F9F9;
		border-radius: 15rpx;
		// color: #fff;
	}

	.link-box:first-child {
		margin-top: 60rpx;
	}

	.link-box .link-type-copy {
		display: flex;
		align-items: center;
		// justify-content: space-between;
	}

	.link-box .link-type {
		font-size: 28rpx;
		font-weight: 400;
		// color: #fff;
	}

	.link-box .btn-copy {
		width: 152rpx;
		height: 50rpx;
		background: $uni-bg-color-main;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: $uni-text-color-inverse;
		line-height: 50rpx;
		text-align: center;
	}

	.link-box .address-link {
		// margin-top: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		// color: #fff;
		line-height: 1.5;
	}

	.separate {
		height: 40rpx;
		background-color: #f9f9f9;
	}

	.form {
		margin-top: 40rpx;
	}

	.option {
		position: relative;
		height: 120rpx;
	}

	.option:nth-child(n + 2) {
		border-top: 1px solid #f9f9f9;
	}

	.option .option-title {
		width: 260rpx;
		flex-shrink: 0;
	}

	.option .option-detail {
		height: 100%;
		position: relative;
	}

	.option .option-detail .text {
		width: 390rpx;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.option .option-detail .btn-get-phone {
		width: 100rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: right;
		position: absolute;
		top: 0;
		right: 0;
	}

	.option .option-detail view,
	.option .option-detail input {
		height: 120rpx;
		line-height: 120rpx;
	}

	.option .placeholder-class {
		color: $uni-text-color-grey;
	}

	.option picker {
		height: 120rpx;
		line-height: 120rpx;
	}

	.bottom .btn-submit {
		height: 90rpx;
		// background: $uni-bg-color-main;
		// border-radius: 45rpx;
		margin-top: 60rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		// background: $uni-bg-color-main;
		
		background:linear-gradient(90deg,#ffa570,#f9782d);
	}

	.bottom .btn-submit[disabled] {
		background: $uni-text-color-main !important;
		color: #fff !important;
		opacity: 0.5;
	}

	.bottom .btn-agree {
		width: 100rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
		text-align: right;
	}

	.bottom .btn-agree .dy-iconfont {
		font-size: 28rpx;
	}

	.bottom .agreement-tips {
		line-height: 40rpx;
	}

	.bottom .btn-agree-placeholder {
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 1px solid #1c1c1c;
		box-sizing: border-box;
		position: relative;
		top: 4rpx;
	}

	.address-link {
		color: $uni-text-color;
		font-size: 36rpx;
		word-break: break-all;
	}

	.delivery-address.edit .option:after {
		content: '\e601';
		font-family: 'dy-iconfont';
		color: $uni-text-color;
		font-size: 36rpx;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	.form-input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		background: #fff;
		border-radius: 18rpx;
		border: 1px solid #fff;
		overflow: hidden;
	}

	.send-code {
		flex-shrink: 0;
		margin-top: 32rpx;
	}
	.link-box-list{
		background-image:url("http://bpic.588ku.com/ad_diversion/22/09/02/71068f848c3d8706a4bd17b2e76c4aaf.png");
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.svgclass{
		position: absolute;
		right: 60rpx;
		// width: ;
		top: 60rpx;
		// color: #fff;
		opacity: 0.3;
	}
</style>
